<template>
    <div class="home-container">
        <no-ssr>
            <full-page ref="fullpage" :options="options" id="fullpage">
                <div class="section page1">
                    <banner :src="banner1">
                    </banner>
                    <div class="dev-width">
                        <Row :gutter="16">
                            <Col :span="16">
                                <div class="first">
                                    <div>
                                    <span>
                                        <img src="~/assets/images/home_01_icon.png">
                                        <span>供需发布</span>
                                    </span>
                                    </div>
                                </div>
                            </Col>
                            <Col :span="8">
                                <div class="second">
                                    <img src="~/assets/images/home_02_icon.png">
                                    <span>经济服务</span>
                                </div>
                                <div class="third">
                                    <img src="~/assets/images/home_03_icon.png">
                                    <span>在线竞拍</span>
                                </div>
                            </Col>
                        </Row>
                        <Row :gutter="16" style="margin-top:8px">
                            <Col :span="8">
                                <div class="fourth">
                                    <img src="~/assets/images/home_04_icon.png">
                                    <span>公示挂牌</span>
                                </div>
                            </Col>
                            <Col :span="8">
                                <div class="fiveth">
                                    <img src="~/assets/images/home_05_icon.png">
                                    <span>研发众包</span>
                                </div>
                            </Col>
                            <Col :span="8">
                                <div class="sixth">
                                    <img src="~/assets/images/home_06_icon.png">
                                    <span>合同登记</span>
                                </div>
                            </Col>
                        </Row>
                    </div>
                </div>
                <div class="section page2">
                    <banner :src="banner2">
                    </banner>
                    <div class="dev-width">
                        <div class="maintitle">
                            <div id="back1" class="back_name">
                                NEWS
                            </div>
                            <div class="front_name">
                                <b>新闻</b>资讯
                                <div class="subtitle">News Information</div>
                            </div>
                            <div class="line left"></div>
                            <div class="line right"></div>
                        </div>
                        <Row :gutter="16" class="detail-container">
                            <Col :span="12">
                                <Carousel class="carousel" v-model="carousel" :autoplay-speed="4000" :autoplay="true"
                                          arrow="hover" :height="290" :radius-dot="false">
                                    <CarouselItem v-for="(item,index) in ads" :key="index">
                                        <a :href="item.url" target="_blank">
                                            <img :src="item.imageUrl" style="height:290px"/>
                                        </a>
                                    </CarouselItem>
                                </Carousel>
                            </Col>
                            <Col :span="12">
                                <ul class="newlist">
                                    <li v-for="(item,index) in news" :key="index">
                                        <div class="time">
                                            <span>{{item.publishTime|formatDate('MM-dd')}}</span>
                                            <span>{{item.publishTime|formatDate('yyyy')}}</span>
                                        </div>
                                        <div class="content">
                                            <span>{{item.title}}</span>
                                            <span>{{item.content}}
                                            <nuxt-link :to="{path:'/news'}">
                                                查看详情
                                            </nuxt-link>
                                        </span>
                                        </div>
                                    </li>
                                </ul>
                            </Col>
                        </Row>
                        <div class="num-container">
                            <div class="title">动态数据</div>
                            <Row>
                                <Col :span="4" v-for="(item,index) in dynamicData" :key="index" :offset="index==0?2:0">
                                    <span>{{item.value|formatNumber}}</span>
                                    <div>{{item.key}}</div>
                                </Col>
                            </Row>
                        </div>
                    </div>
                </div>
                <div class="section page3">
                    <banner :src="banner3">
                    </banner>
                    <div class="dev-width">
                        <div class="maintitle">
                            <div id="back2" class="back_name">
                                BRAND SERVICE
                            </div>
                            <div class="front_name">
                                <b>品牌</b>服务
                                <div class="subtitle">Brand Service</div>
                            </div>
                            <div class="line left"></div>
                            <div class="line right"></div>
                        </div>
                        <Row class="detail-container">
                            <Col :span="12">
                                <div class="item"
                                     :class="['animated bounceInUp',{'active':selectBrandService==item?true:false}]"
                                     v-for="(item,index) in brandServices" @mousemove="changeService(index)"
                                     :key="index">
                                    <div class="head">
                                    <span>
                                        <i :class="item.icon"></i>
                                    </span>
                                    </div>
                                    <div class="head_info">
                                    <span class="title">
                                        {{item.title}}
                                    </span>
                                        <span class="subtitle">
                                        {{item.subtitle}}
                                    </span>
                                    </div>
                                </div>
                            </Col>
                            <Col :span="12">
                                <div class="item-detail">
                                    <img class="animated fadeIn" :src="selectBrandService.url">
                                    <span class="animated slideInRight">{{selectBrandService.content}}</span>
                                </div>
                            </Col>
                        </Row>
                    </div>
                </div>
                <div class="section page4">
                    <div class="dev-width">
                        <Tabs value="-1" :animated="false" @on-click="handleHotDemandTabChange">
                            <TabPane label="全部" name="-1"></TabPane>
                            <TabPane label="专利" name="01"></TabPane>
                            <TabPane label="技术成果" name="02"></TabPane>
                            <TabPane label="专利&技术成果" name="03"></TabPane>
                        </Tabs>
                        <div class="hot-demand-table">
                            <Table border size="large" :columns="hotDemand.tableColumns" :data="hotDemand.tableData">
                                <template slot="footer">
                                    <button @click="$router.push('/search?page=1&rows=10&category=demand')" type="button"
                                            class="ivu-btn ivu-btn-primary ivu-btn-circle" style="border-radius: 32px;">
                                        <span>查看更多</span>
                                        <i class="ivu-icon ivu-icon-chevron-right"></i>
                                    </button>
                                </template>
                            </Table>
                        </div>
                    </div>
                </div>
                <div class="section fp-auto-height">
                    <app-footer></app-footer>
                </div>
            </full-page>
        </no-ssr>
    </div>
</template>
<script>
    import banner1 from '~/assets/images/a1.png'
    import banner2 from '~/assets/images/a2.png'
    import banner3 from '~/assets/images/a3.png'
    import jsjlr from '~/assets/images/home_jsjlr.jpg'
    import soho from '~/assets/images/home_soho.jpg'
    import cxb from '~/assets/images/home_cxb.jpg'
    import brand2 from '~/assets/images/a2.png'
    import Banner from '~/components/Banner'
    import {mapState} from 'vuex'
    import Footer from '~/components/Footer'
    import portal from "~/net/portal"

    export default {
        name: "home",
        layout: 'onlyHeader',
        head() {
            return {
                title: '江苏省产权技术交易市场欢迎你'
            }
        },
        async asyncData({param, req}) {
            let [resp1, resp2, resp3] = await Promise.all(
                [
                    portal.getAds({
                        client: req
                    }),
                    portal.dynamicSummary({
                        client: req
                    }),
                    portal.getHomeNews({
                        client: req
                    })
                ].map(p => p.catch(e => e)))
                .catch(e => console.log(e))
            let params = [
                {
                    key: '01',
                    label: '专利申请量（周更新）'
                },
                {
                    key: '02',
                    label: '技术交易额（月更新）'
                },
                {
                    key: '03',
                    label: '平台用户数（实时态）'
                },
                {
                    key: '04',
                    label: '平台数据量（实时态）'
                },
                {
                    key: '05',
                    label: '平台点击量（实时态）'
                }
            ]
            return {
                ads: resp1.data && resp1.data.map(_ => {
                    return {
                        url: _.url,
                        imageUrl: _.imageUrl
                    }
                }) || [],
                dynamicData: resp2.data && resp2.data.map(item => {
                    let x = params.find(_ => _.key == item.key)
                    return {
                        key: x.label,
                        value: item.value
                    }
                }).sort((a, b) => {
                    return a.key > b.key
                }) || [],
                news: resp3.data && resp3.data.map(_ => {
                    return {
                        publishTime: _.updateTime,
                        title: _.title,
                        content: _.contentText.substring(0, 48) + '...'
                    }
                }) || []
            }
        },
        data() {
            return {
                options: {
                    licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
                    afterLoad: this.afterLoad,
                    afterRender: this.afterRender,
                    onLeave: this.onLeave,
                    resize: true,
                    anchors: ['page1', 'page2', 'page3', 'page4', 'footer'],
                    sectionsColor: ['white', 'white', 'white', 'white']
                },
                banner1,
                banner2,
                banner3,
                carousel: 0,
                brandServices: [{
                    icon: 'iconfont icon-ego-box',
                    title: '技术经理人事务所',
                    subtitle: '省技术产权交易市场认定的促进技术经理人执业健康发展，保障技术经理人合法权益的机构。',
                    url: jsjlr,
                    content: '为规范技术经理人从事技术转移服务相关业务管理，促进技术经理人职业健康发展，保障技术经理人合法权益。江苏省技术产权交易市场设立技术经理人事务所，吸纳及挂靠技术经理人开展业务，并进行管理。省技术产权交易市场认定一批来自科研机构高校院所金融机构企业以及新型研发机构的技术经理人，技术经理人挂靠在省技术市场认定的事务所，并由他们提供物理场所 票据结算等服务。第一批技术经理人事务所包括高校技术转移中心、协会、新型研发机构等。'
                },
                    {
                        icon: 'iconfont icon-index_notice',
                        title: '商服SOHO',
                        subtitle: '一站式商务服务，创业者的全能管家。',
                        url: soho,
                        content: '初创企业，由于人员配备不足及资源的缺乏，亟需解决工商、财税、法务、人力、商标、知识产权、媒体推广、品牌塑造等一系列的专业问题。“商服SOHO”，通过严格筛选和过程监督相关领域服务商，为初创企业提供专业化的打包服务，解决初创企业后顾之忧的同时，保持初创企业的灵活性。为初创企业的快速发展保驾护航。'
                    },
                    {
                        icon: 'iconfont icon-renyuanguanli',
                        title: '科技创新板',
                        subtitle: '省技术产权交易市场和江苏股交中心联合打造的服务全省科技型中小企业的全新板块。',
                        url: cxb,
                        content: '“科技创新板”是响应省委、省政府“明确江苏科技创新的战略目标，提高创新型省份建设水平，努力建设科技强省”的号召，由省技术产权交易市场和江苏股交中心联合打造的服务全省科技型中小企业的全新板块，也是江苏地方四板的重要板块之一。“科技创新板”具有规范公司治理、提升企业形象、发现企业价值、实现多项融资、促进股权流通、提升信用增进、易于收购兼并等市场功能。省技术产权交易市场为挂牌企业提供知识产权确权增信的服务，帮助企业从银行获得融资，另与南京银行、中国银行等合作了定制化产品，如“知识产权质押贷款”、“中银科创通”等产品，协助企业获得融资。科技创新板的设立，一方面是为了引导科技创新企业，实现体系化对接资本圈，扩大企业品牌影响力和市场公信力，提高股权融资、并购重组成功率。另一方面，也是为了提升民间资本投资兴趣，引导社会资源向具有竞争力的新兴行业、创新性企业集聚，培育新的经济增长点，推动产业结构调整升级。'
                    }
                ],
                selectBrandService: {},
                hotDemand: {
                    tableColumns: [
                        {
                            title: '需求名称',
                            key: 'name',
                            render: (h, params) => {
                                return h('a', {
                                        on: {
                                            click: () => {
                                                this.$router.push('/demand?id=' + params.row.id)
                                            }
                                        }
                                    },
                                    params.row.name)
                            }
                        },
                        {
                            title: '需求类型',
                            key: 'type'
                        },
                        {
                            title: '高新技术领域',
                            key: 'highTech'
                        },
                        {
                            title: '合作方式',
                            key: 'cooperationType'
                        },
                        {
                            title: '发布者',
                            key: 'publisher'
                        }
                    ],
                    tableData: [],
                    typeFilter: '',
                }
            }
        },
        components: {
            Banner,
            'app-footer': Footer
        },
        computed: {
            ...mapState(['user']),
        },
        mounted() {
            this.selectBrandService = this.brandServices[0]
            this.getHotDemandTableData()
        },
        methods: {
            async getHotDemandTableData() {
                this.hotDemand.tableData = [
                    {
                        id: 694,
                        name: '一种XXXXXXXXX需求',
                        type: '专利&技术成果',
                        highTech: '资源与环境',
                        cooperationType: '技术转让',
                        publisher: '杨XX'
                    },
                    {
                        id: 694,
                        name: '一种XXXXXXXXX需求',
                        type: '专利&技术成果',
                        highTech: '资源与环境',
                        cooperationType: '技术转让',
                        publisher: '杨XX'
                    },
                    {
                        id: 694,
                        name: '一种XXXXXXXXX需求',
                        type: '专利&技术成果',
                        highTech: '资源与环境',
                        cooperationType: '技术转让',
                        publisher: '杨XX'
                    },
                    {
                        id: 694,
                        name: '一种XXXXXXXXX需求',
                        type: '专利&技术成果',
                        highTech: '资源与环境',
                        cooperationType: '技术转让',
                        publisher: '杨XX'
                    }
                ]
            },
            handleHotDemandTabChange(value) {
                if (value === '-1') {
                    this.hotDemand.typeFilter = '';
                } else {
                    this.hotDemand.typeFilter = value
                }
                this.getHotDemandTableData();
            },
            changeService(index) {
                this.selectBrandService = this.brandServices[index]
            },
            //页面初始化完成后的回调函数
            afterRender() {

            },
            //滚动到某一屏后的回调函数
            afterLoad(page) {
                // if (page) {
                //     if (page.index == 0) {

                //     }
                //     else if (page.index == 1) {

                //         let x = document.querySelector('#back1')
                //         x.classList.add('zoomIn')
                //     }
                //     else if (page.index == 2) {

                //         document.querySelector('#back1').classList.add('animated').add('zoomIn')
                //     }
                // }
            },
            //滚动前的回调函数
            onLeave(page, nextpage, direction) {
                // if (page) {
                //     if (page.index == 0) {

                //     }
                //     else if (page.index == 1) {
                //         let x = document.querySelector('.back_name')
                //         x.classList.remove('zoomIn')
                //     }
                //     else if (page.index == 2) {
                //         document.querySelector('.back_name').classList.remove('animated').remove('zoomIn')
                //     }
                // }


            }
        }
    }
</script>
<style lang="less">
    .page4 {

        .ivu-tabs-bar {

            border-bottom: none !important;

            .ivu-tabs-nav-scroll {
                background: none !important;
            }
        }

        .ivu-table-footer {
            text-align: center;
        }

    }
</style>
<style lang="less" scoped>
    .home-container {
        .page1 {
            position: relative;
            .dev-width {
                top: 270px;
            }
            .ivu-row {
                .ivu-col {
                    .div {
                        height: 210px;
                        line-height: 210px;
                        border-radius: 5px;
                        text-align: center;

                        span {
                            color: white;
                            font-size: 30px;
                            font-weight: 400;
                        }
                    }

                    .first {
                        .div;
                        background: linear-gradient(to bottom, #ff9190 0, #ff8180 100%);
                        height: 428px;
                        line-height: 428px;
                        position: relative;

                        div {
                            .div;
                            background: url(../assets/images/home_bj.png) no-repeat center center;
                            height: 428px;
                            line-height: 428px;
                        }
                    }

                    .second {
                        .div;
                        background: linear-gradient(to bottom, #64ebc8 0, #4ed2b0 100%);
                    }

                    .third {
                        .div;
                        margin-top: 8px;
                        background: linear-gradient(to bottom, #ffc77e 0, #ffb85b 100%);
                    }

                    .fourth {
                        .div;
                        background: linear-gradient(to bottom, #7cd4fe 0, #7cbefe 100%);
                    }

                    .fiveth {
                        .div;
                        background: linear-gradient(to bottom, #c5ee4b 0, #a1ce18 100%);
                    }

                    .sixth {
                        .div;
                        background: linear-gradient(to bottom, #a0a5fe 0, #8a91f4 100%);
                    }
                }
            }
        }

        .page2 {
            position: relative;

            .dev-width {
                top: 330px;
            }

            .maintitle {
                position: relative;
                height: 85px;
                text-align: center;

                .back_name {
                    font-size: 85px;
                    color: rgba(232, 233, 237, 0.8);
                    z-index: 0;
                    letter-spacing: 10px;
                    font-family: "Arial";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

                .front_name {
                    font-size: 28px;
                    font-weight: bold;
                    color: black;
                    z-index: 1;
                    line-height: 25px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    b {
                        color: #4074e1;
                    }

                    .subtitle {
                        font-size: 15px;
                    }
                }

                .line {
                    height: 1px;
                    width: calc(50% - 80px);
                    background: black;
                    position: absolute;
                    z-index: 3;
                    top: 50%;

                    &.right {
                        right: 0;
                    }

                    &.left::after,
                    &.right::before {
                        content: "";
                        position: absolute;
                        width: 90px;
                        right: 0;
                        top: -2px;
                        z-index: 4;
                        border: 2px solid #4074e1;
                        background: #4074e1;
                    }

                    &.right::before {
                        left: 0;
                    }
                }
            }

            .detail-container {
                margin-top: 10px;

                .ivu-col {
                    .carousel {
                        .ivu-carousel-arrow.left {
                            left: 0;
                        }

                        .ivu-carousel-arrow.right {
                            right: 0;
                        }
                    }
                }

                .newlist {
                    li {
                        padding-bottom: 6px;
                        border-bottom: 1px solid #cccccc;
                        height: 72px;

                        .time {
                            color: #0a0a0a;
                            width: 70px;
                            text-align: right;
                            display: inline-block;
                            vertical-align: top;
                            span {
                                display: block;
                                font-size: 25px;
                                &:last-child {
                                    font-size: 14px;
                                    font-weight: bold;
                                    margin-top: -10px;
                                }
                            }
                        }

                        .content {
                            padding-left: 20px;
                            width: 407px;
                            display: inline-block;
                            font-size: 14px;
                            color: black;
                            vertical-align: bottom;
                            padding-top: 4px;

                            span {
                                display: block;
                                line-height: 25px;
                                font-weight: 800;
                                top: -5px;

                                &:last-child {
                                    font-size: 14px;
                                    line-height: 20px;
                                    color: #4f4f4f;
                                    font-weight: normal;
                                }
                            }
                        }
                    }
                }
            }

            .num-container {
                background: url(../assets/images/home_2f_bj.png) no-repeat center center;
                width: 100%;
                height: 190px;
                color: white;

                .title {
                    padding-top: 25px;
                    padding-left: 10px;
                    font-size: 18px;
                }

                .ivu-col {
                    text-align: center;
                    margin-top: 20px;

                    span {
                        font-size: 26px;
                    }

                    div {
                        font-size: 12px;
                    }
                }
            }
        }

        .page3 {
            position: relative;
            margin-bottom: 55px;
            .dev-width {
                top: 350px;
                text-align: center;
            }

            .maintitle {
                position: relative;
                height: 65px;

                .back_name {
                    font-size: 75px;
                    color: rgba(232, 233, 237, 0.8);
                    z-index: 0;
                    font-family: "Arial";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    min-width: 650px;
                }

                .front_name {
                    font-size: 28px;
                    font-weight: bold;
                    color: black;
                    z-index: 1;
                    line-height: 25px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);

                    b {
                        color: #4074e1;
                    }

                    .subtitle {
                        font-size: 15px;
                    }
                }

                .line {
                    height: 1px;
                    width: calc(50% - 80px);
                    background: black;
                    position: absolute;
                    z-index: 3;
                    top: 50%;

                    &.right {
                        right: 0;
                    }

                    &.left::after,
                    &.right::before {
                        content: "";
                        position: absolute;
                        width: 90px;
                        height: 4px;
                        right: 0;
                        top: -2px;
                        z-index: 4;
                        background: #4074e1;
                    }

                    &.right::before {
                        left: 0;
                    }
                }
            }

            .detail-container {
                margin-top: 15px;
                position: relative;
                .ivu-col {
                    .item {
                        height: 150px;
                        cursor: pointer;
                        .head {
                            width: 136px;
                            height: 136px;
                            line-height: 136px;
                            display: inline-block;
                            vertical-align: top;
                            border: 1.5px solid #4f4f4f;
                            border-radius: 50%;
                            transition: all 0.5s ease-in;
                            opacity: 0.5;

                            i {
                                font-size: 68px;
                                color: #4f4f4f;
                            }
                        }

                        .head_info {
                            display: inline-block;
                            margin-left: 40px;

                            .title {
                                font-size: 20px;
                                text-align: left;
                                display: block;
                                color: black;
                                font-weight: 800;
                                line-height: 50px;
                            }

                            .subtitle {
                                display: block;
                                text-align: left;
                                font-size: 12px;
                                color: #4f4f4f;
                                width: 200px;
                                line-height: 25px;
                            }
                        }

                        &.active {
                            .head {
                                background: #4074e1;
                                border: none;
                                opacity: 0.7;
                                i {
                                    color: white;
                                }
                            }

                            .head_info {
                                .title {
                                    color: #4074e1;
                                }
                            }
                        }
                    }

                    .item-detail {
                        img {
                            height: 485px;
                            height: 276px;
                        }
                        span {
                            text-indent: 25px;
                            text-align: left;
                            margin-top: 25px;
                            font-size: 12px;
                            color: #4f4f4f;
                            line-height: 22px;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 12;
                            overflow: hidden;
                        }
                    }
                }
            }
        }
    }
</style>
